import { Text, View } from '@ray-js/components';
import React, { useEffect, useState } from 'react';
import CircleProgresView from '@/components/MyCircleProgressView';
export default function Test() {
  const [temperature, setTemperature] = useState(0);

  const handleMove = (v: number) => {
    setTemperature(v);
  };

  const handleEnd = (v: number) => {
    setTemperature(v);
  };
  useEffect(() => {
    setTimeout(() => {
      setTemperature(100);
    }, 3000);
  }, []);

  const [hideTh, setHideThumb] = useState(false);
  return (
    <View
      style={{
        width: '100vw',
        height: '100vh',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
      
      <CircleProgresView
        value={0}
        innerRingRadius={125}
        radius={145}
        colorType={0}
        hideThumb={false}
        onTouchMove={handleMove}
        onTouchEnd={handleEnd}
        renderInnerCircle={() => (
          <View
            style={{
              flexDirection: 'column',
              width: '250rpx',
              height: '250rpx',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
              <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start' }}>
                <Text style={{ fontSize: '15px', color: 'white' }}>23</Text>
                <Text style={{ fontSize: '12px', color: 'white' }}>0C</Text>
              </View>
            </View>
          </View>
        )}
      />
      </View>
    </View>
  );
}